Vue.component('admin-supplier-management', {
  data() {
    return {
      suppliers: [],
      loading: false,
      searchForm: {
        search: ''
      },
      dialogVisible: false,
      dialogTitle: '',
      formData: {
        id: null,
        name: '',
        contact_person: '',
        phone: '',
        email: '',
        address: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        contact_person: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      },
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    async loadSuppliers() {
      this.loading = true;
      try {
        const params = {
          page: this.currentPage,
          page_size: this.pageSize,
          ...this.searchForm
        };
        const response = await supplierAPI.getSuppliers(params);
        this.suppliers = response.data.suppliers;
        this.total = response.data.total;
      } catch (error) {
        console.error('获取供应商列表失败:', error);
        this.$message.error(error.response?.data?.msg || '获取供应商列表失败');
      } finally {
        this.loading = false;
      }
    },
    handleSearch() {
      this.currentPage = 1;
      this.loadSuppliers();
    },
    handleReset() {
      this.searchForm = {
        search: ''
      };
      this.currentPage = 1;
      this.loadSuppliers();
    },
    handleAdd() {
      this.dialogTitle = '添加供应商';
      this.formData = {
        id: null,
        name: '',
        contact_person: '',
        phone: '',
        email: '',
        address: ''
      };
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.dialogTitle = '编辑供应商';
      this.formData = { ...row };
      this.dialogVisible = true;
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确定要删除这个供应商吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        
        await supplierAPI.deleteSupplier(row.id);
        this.$message.success('删除成功');
        this.loadSuppliers();
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除供应商失败:', error);
          this.$message.error(error.response?.data?.msg || '删除供应商失败');
        }
      }
    },
    async handleSubmit() {
      try {
        await this.$refs.form.validate();
        
        if (this.formData.id) {
          await supplierAPI.updateSupplier(this.formData.id, this.formData);
          this.$message.success('更新成功');
        } else {
          await supplierAPI.createSupplier(this.formData);
          this.$message.success('添加成功');
        }
        
        this.dialogVisible = false;
        this.loadSuppliers();
      } catch (error) {
        console.error('保存供应商失败:', error);
        this.$message.error(error.response?.data?.msg || '保存供应商失败');
      }
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.loadSuppliers();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.loadSuppliers();
    }
  },
  async mounted() {
    await this.loadSuppliers();
  },
  template: `
    <div class="supplier-management">
      <el-card>
        <div slot="header">
          <span>供应商管理</span>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd" style="float: right;" size="small">
            添加供应商
          </el-button>
        </div>
        
        <!-- 搜索表单 -->
        <el-form :model="searchForm" inline>
          <el-form-item label="搜索">
            <el-input v-model="searchForm.search" placeholder="请输入供应商名称、联系人、电话或邮箱" clearable size="small" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch" size="small">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset" size="small">重置</el-button>
          </el-form-item>
        </el-form>
        
        <!-- 供应商表格 -->
        <el-table :data="suppliers" v-loading="loading" border>
          <el-table-column prop="name" label="供应商名称" min-width="150"></el-table-column>
          <el-table-column prop="contact_person" label="联系人" width="120"></el-table-column>
          <el-table-column prop="phone" label="联系电话" width="130"></el-table-column>
          <el-table-column prop="email" label="邮箱" min-width="180"></el-table-column>
          <el-table-column prop="address" label="地址" min-width="200" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" style="color: #f56c6c;" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin-top: 20px; text-align: right;">
        </el-pagination>
      </el-card>
      
      <!-- 添加/编辑对话框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
        <el-form :model="formData" :rules="formRules" ref="form" label-width="100px">
          <el-form-item label="供应商名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入供应商名称"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contact_person">
            <el-input v-model="formData.contact_person" placeholder="请输入联系人"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="formData.address" placeholder="请输入地址"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </el-dialog>
    </div>
  `
});
